<script>
import {mapActions,mapState} from 'pinia';
import { useLoginStore } from '@/stores/login';
export default {
  name: 'Home',
  computed: {
    ...mapState( useLoginStore, { logined: 'logined', loginName: 'loginName'} )
  },
  methods: {
    ...mapActions(useLoginStore, { logout: 'signOut'})
  }
}

</script>
<template>
    <el-container class="wrapper">
      <el-header class="header">
          <!--导航栏-->
          <el-menu mode="horizontal" v-bind:ellipsis="false" :router="true" v-if="logined">
              <el-menu-item index="/pc/main">LOGO</el-menu-item>
              <div style="flex-grow: 1" />
              <el-menu-item index="/pc/mine">我的</el-menu-item>
              <el-menu-item index="/pc/main" @click="logout">退出</el-menu-item>
          </el-menu>
          <el-menu mode="horizontal" v-bind:ellipsis="false" :router="true" v-else>
              <el-menu-item index="/pc/main">LOGO</el-menu-item>
              <div style="flex-grow: 1" />
              <el-menu-item index="/pc/login">登录</el-menu-item>
          </el-menu>
      </el-header>
      <el-container>
          <el-aside class="aside">aside</el-aside>
          <el-main class="main">
              <!--路由出口-->
              <router-view></router-view>
          </el-main>
      </el-container>
      <el-footer class="footer">
          &copy; 2023 ecut
      </el-footer>
    </el-container>
  </template>
  
  <style scoped>
  .wrapper {
    margin: 10px;
    border: 1px solid blue ;
  }
  .header {
    background: #fff;
  }
  .aside {
    min-height: 300px;
  }
  .main {
    padding: 0;
    background: #ffe5c9;
  }
  .footer {
    min-height: 50px;
    line-height: 50px;
    text-align: center;
    background: #ff0;
  }
  </style>